.device-state {
  margin-top: 80rem;
  width: 800rem;

  .list {
    display: flex;
    flex-wrap: wrap;

    .item {
      width: 43rem;
      margin-right: 10rem;

      .item-block {
        position: relative;
        width: 43rem;
        height: 161rem;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        padding: 2rem;
        box-sizing: border-box;
        border: 2rem solid;
        border-image: linear-gradient(180deg, rgba(255, 67.00000360608101, 67.00000360608101, 0.125), rgba(255, 67.00000360608101, 67.00000360608101, 0.5)) 2 2;

        .item-block-inner {
          height: 120rem;
          background: linear-gradient(180deg, rgba(255, 67.00000360608101, 67.00000360608101, 0.125), rgba(255, 67.00000360608101, 67.00000360608101, 0.5));
        }

        .item-block-data {
          position: absolute;
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: D-DIN, serif;
          font-weight: 700;
          font-size: 18rem;
          color: #FFFFFF;
          line-height: 23rem;
        }
      }

      .item-code {
        word-break: break-word;
        width: 43rem;
        height: 69rem;
        margin-top: 10rem;
        margin-bottom: 25rem;
        font-family: D-DIN, serif;
        font-weight: 700;
        font-size: 18rem;
        color: #FFFFFF;
        line-height: 23rem;
        text-align: center;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }
    }

    .item:nth-child(15) {
      margin: 0;
    }

    .item:nth-child(30) {
      margin: 0;
    }

    .item-idle {
      .item-block {
        border-image: linear-gradient(180deg, rgba(255, 245.00000059604645, 60.00000022351742, 0.125), rgba(255, 245.00000059604645, 60.00000022351742, 0.5)) 2 2;

        .item-block-inner {
          background: linear-gradient(180deg, rgba(255, 245.00000059604645, 60.00000022351742, 0.125) 4%, rgba(255, 245.00000059604645, 60.00000022351742, 0.5) 100%);
        }
      }
    }

    .item-run {
      .item-block {
        border-image: linear-gradient(180deg, rgba(0, 255, 186.0000041127205, 0.125), rgba(0, 255, 186.0000041127205, 0.5)) 2 2;

        .item-block-inner {
          background: linear-gradient(360deg, rgba(0, 255, 186, 0.75) 4%, rgba(0, 255, 186, 0.3975) 100%);
        }
      }
    }

    .item-correct {
      .item-block {
        border-image: linear-gradient(180deg, rgba(0, 132.0000073313713, 244.0000006556511, 0.125), rgba(0, 132.0000073313713, 244.0000006556511, 0.5)) 2 2;

        .item-block-inner {
          background: linear-gradient(360deg, rgba(0, 132, 244, 0.75) 4%, rgba(0, 132, 244, 0.3975) 100%);
        }
      }
    }

    .item-close {
      .item-block {
        border-image: linear-gradient(180deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0.125), rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0.5)) 2 2;

        .item-block-inner {
          background: linear-gradient(180deg, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0.125) 4%, rgba(216.00000232458115, 216.00000232458115, 216.00000232458115, 0.5) 100%);
        }
      }
    }
  }
}